<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>淘宝搜索案例</title>
    <!-- 导入页面的基本样式 -->
    <link rel="stylesheet" href="./css/search.css" />
  </head>

  <body>
    <div class="container">
      <!-- Logo -->
      <img src="./images/taobao_logo.png" alt="" class="logo" />

      <div class="box">
        <!-- tab 栏 -->
        <div class="tabs">
          <div class="tab-active">宝贝</div>
          <div>店铺</div>
        </div>
        <!-- 搜索区域（搜索框和搜索按钮） -->
        <div class="search-box">
          <input type="text" class="ipt" placeholder="请输入要搜索的内容" />
          <button class="btnSearch">搜索</button>
        </div>

        <!-- 搜索建议列表 -->
        <div id="suggest-list">
          <div class="suggest-item">搜索建议1</div>
          <div class="suggest-item">搜索建议2</div>
          <div class="suggest-item">搜索建议3</div>
          <div class="suggest-item">搜索建议4</div>
        </div>
      </div>
    </div>

    <!-- 导入 jQuery -->
    <script src="./lib/jquery.js"></script>
    <!-- 导入 axios -->
    <script src="./lib/axios.js"></script>
    <script>
      // onchange(离开焦点触发)oninput(输入触发)
      // 首先第一步设置防抖
      let time = null;
      $('.ipt').on('input', function () {
        clearTimeout(time);

        let kw = $(this).val().trim(); //此时就得到关键字了
        // 需要判断，如果输入框里面的内容是空的就直接返回
        if (!kw) {
          return;
        } else {
          // 这里写如果输入了内容要做什么，这个时候就需要开启定时器了
          time = setTimeout(function () {
            // 这里写如果300毫秒满了后需要做什么
            // 需要做的事情有
            // 1.将这个输入框里面的数据发送到后台
            // 2.接收后台返回来的数据
            // 3.建立展示数据的结构
            // 内容有点多，所以需要设置函数
            getSuggestList(kw);
          }, 300);
        }
      });

      function getSuggestList(kw) {
        // 将数据传送出去，并查询
        jsonp('http://www.liulongbin.top:3006/api/suggest', {
          q: kw,
        }).then(({ result }) => {
          // 这里就是接收到了数据，现在需要将数据展示在页面的结构上
          // 这个数据是一个列表，需要进行遍历，然后再放到结构上
          $('#suggest-list').html(
            result.map(item => {
              // 此时数据已经在新的数组里面了，item就是数组里面的每一项的键
              ` <div class="suggest-item">${item}</div>`;
            }),
          );
        });
      }
      function jsonp(url, query) {
        //这里用两个参数是因为地址的形式有些冲突
        return new Promise(function (resolve, reject) {
          // 要根据jsonp的实现原理，做跨域请求
          // 原理不受跨域的限制=>url给src=>跨域会返回一段执行代码=>对应的函数接收这个代码数据
          // 所以要创建一个script标签
          // 创建一个标签
          let script = document.createElement('script');
          // 定义一个回调的方法->将方法名传入到url

          // 方法不能是固定的
          let callbackName = `callback${Date.now()}`;
          // 这里是需要设置一个全局的方法，让所有人都能够取到这个方法
          window[callbackName] = function (data) {
            // 这里的data就是服务器返回的数据，我们需要将这个数据通过.then的方式得到就需要用resolve进行返回
            resolve(data);
            // 返回了这个数据之后需要将这个方法销毁，避免内存里面存在太多这样的已经使用过的方法
            delete window[callbackName]; //这个是将数据销毁了，但是页面上还有创造的结构，所以还需要在调用这个方法后将页面上的结构进行删除
            document.body.removeChild(script);
          };
          // 函数调用完成后，需要将函数的名字增加到地址的后面
          url = url + '?callback=' + callbackName;
          let arr = [];
          for (let key in query) {
            arr.push(`${key}=${query[key]}`);
          }
          script.src = url + '&' + arr.join('&'); //赋值标签内容
          // 将标签展示在页面上
          document.body.append(script);
        });
      }
    </script>
  </body>
</html>
